<template>
  <div class="test">
    <div class="clear-box">
      <h6>清空内存信息</h6>
      <button class="btn clear-btn" @click="onClearFirst">首页首次登陆引导</button>
      <button class="btn clear-btn" @click="onClearEdit">企业编辑引导</button>
    </div>

    <!-- <button @click="open">请选择地址</button> -->
    <!-- 图片裁剪 -->
    <!-- <UploadItem :isCropper="true" :width="2" :height="2" /> -->
    <!-- 省市区 -->
    <!-- <picker v-model="visible" :data-items="cityItems" @change="onCityValuesChange">
      <div class="top-content picker-header" slot="top-content">
        <div class="cancel" @click="visible = false">取消</div>
        <div class="title">请选择地址</div>
        <div class="submit" @click="onSubmit">确定</div>
      </div>
    </picker> -->
    <!--form  -->
    <!-- <my-form :model="form" :rules="rules" ref="ruleForm">
      <my-form-item label="姓名" prop="name" :useInput="false" :isRquiredLabel="false">
        <my-input v-model="form.name" maxlength="2" placeholder="请输入姓名"></my-input>
      </my-form-item>
      <my-form-item label="手机号" prop="tel" :useInput="false" :isRquiredLabel="false">
        <my-input v-model="form.tel" placeholder="请输入手机号"></my-input>
      </my-form-item>
    </my-form> -->
    <!-- <div @click="submitForm">提交</div> -->
    <!-- <div @click="showAddress = true">选择地址</div>
    <vue-city v-model="showAddress" :infoData="oldData" @close="closeAddress" @change="onChangeAddress"></vue-city>
    <div v-if="false">
      <vue-tab :tabtitles="titles" :isTitleFixed="true" @index="onPage" ref="tab">
        <div class="tab-content-container">
          <div v-for="item in cityData" :key="item.code" @click="onCity(item)">{{item.name}}</div>
        </div>
        <div class="tab-content-container">
          <div v-for="item in cityList" :key="item.code" @click="onArea(item)">{{item.name}}</div>
        </div>
        <div class="tab-content-container">
          <div v-for="item in areaList" :key="item.code" @click="onAddress(item)">{{item.name}}</div>
        </div>
      </vue-tab>
    </div>
    <div class="touch-box" ref="touch"></div> -->
  </div>
</template>
<script>
import picker from 'vue-3d-picker'
import cityData from '../common/city.json'
import UploadItem from '@/components/UploadItem'
import MyForm from '@/components/form/MyForm'
import MyFormItem from '@/components/form/MyFormItem'
import MyInput from '@/components/form/MyInput'
import { isvalidPhone } from '@/common/validateReg'
import VueTab from '@/components/VueTab'
import VueCity from '@/components/VueCity'
export default {
  components: {
    picker,
    UploadItem,
    MyForm,
    MyFormItem,
    MyInput,
    VueTab,
    VueCity
  },
  data() {
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写手机号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请填写正确手机号码'))
      } else {
        callback();
      }
    }
    return {
      cityData: cityData,
      cityList: [],
      areaList: [],
      showAddress: false,
      visible: false,
      cityItems: [],
      address: '',
      addressObj: {},
      province: '',
      city: '',
      area: '',
      oldData: '',
      form: {
        name: '',
        tel: '',
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        tel: {
          required: true,
          validator: validateTel,
          trigger: 'blur',
        },
      },
      titles: ['请选择']
    }
  },
  watch: {
    province(newVal) {
      // 复制市级数据 this.cityItems[1].values
      cityData.forEach((item) => {
        if (item.name === newVal) {
          this.cityItems[1].values = item.children
        }
      })
      // 从单个city 到 多个 导致显示bug
      this.initCityClass()
    },
    city(newVal) {
      // 复制县区级数据 this.cityItems[2].values
      this.cityItems[1].values.forEach((item) => {
        if (item.name === newVal) {
          this.cityItems[2].values = item.children
        }
      })
    },
  },
  mounted() {
    // this.initCityItems()
    setTimeout(() => {
      this.oldData = {
        province: '河北省',
        city: '石家庄市',
        area: '长安区',
      }
    }, 1000)

  },
  methods: {
    onClearFirst() {
      window.localStorage.removeItem('firstLogin')
      this.$toast('已清空首次首页引导框，请退出登陆，重新进去')
    },
    onClearEdit() {
      window.localStorage.removeItem('editGuide')
      this.$toast('已清空首次企业编辑引导框')
    },
    onChangeAddress(address) {
      console.log(address)
      this.showAddress = false
    },
    closeAddress() {
      this.showAddress = false
    },
    onSubmit() {
      this.visible = false
      this.address = this.province + this.city + this.area
      this.addressObj['province'] = this.province
      this.addressObj['city'] = this.city
      this.addressObj['area'] = this.area
    },
    initCityItems() {
      // index 默认选中第几个  name 是values内 {} 要展示到页面的属性名， values 数据 类型数组
      this.cityItems = [
        { index: 0, name: 'name', values: cityData },
        { index: 0, name: 'name', values: cityData[0].children },
        { index: 0, name: 'name', values: cityData[0].children[0].children },
      ]
    },
    open() {
      //   this.$toast.center('但试验药物无法帮助晚期新冠患者恢复，因此试验将终止，不再招募志愿者。')
      this.visible = true
    },
    onCityValuesChange(province, city, area) {
      this.province = province.name
      this.city = city.name
      this.area = area.name
      // // 遍历city 数据
      // cityData.forEach((item) => {
      //   // 省份名和change的省份名相同的话，市级 values 就是 当面遍历的 children
      //   if (item.name === province.name) {
      //     this.cityItems[1].values = item.children
      //     // 遍历当前省级数据下的children  也就是 市级数据
      //     item.children.forEach((item2) => {
      //       // 市级名和change的市级名相同的话，县区级 values 就是 当面遍历的 children
      //       if (item2.name === city.name) {
      //         this.cityItems[2].values = item2.children
      //       }
      //     })
      //   }
      // })
    },
    searchOld() {
      // 遍历city 数据
      cityData.forEach((item, index) => {
        // 省份名字 和 回传省份名字一致
        if (item.name === this.oldData.province) {
          // 展示当前省份名字 取 index, 并且下面的市级数据赋予  this.cityItems[1].values
          this.cityItems[0].index = index
          this.cityItems[1].values = item.children
          // 遍历市级数据
          item.children.forEach((item1, index1) => {
            // 展示当面市级名字 取 index, 并且下面的县区级数据赋予  this.cityItems[2].values
            if (item1.name === this.oldData.city) {
              this.cityItems[1].index = index1
              this.cityItems[2].values = item1.children
              // 遍历县区级数据
              item1.children.forEach((item2, index2) => {
                // 展示当前县区级名字 取 index,
                if (item2.name === this.oldData.area) {
                  this.cityItems[2].index = index2
                }
              })
            }
          })
        }
      })
    },
    initCityClass() {
      if (this.cityItems[1].values.length > 1) {
        this.$nextTick(() => {
          document.getElementsByClassName(
            'picker-item-content'
          )[1].style.transform = 'rotateX(0.01deg)'
        })
      } else {
        this.$nextTick(() => {
          document.getElementsByClassName(
            'picker-item-content'
          )[1].style.transform = 'rotateX(0deg)'
        })
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },

}
</script>
<style lang="scss">
.picker-backdrop {
  overflow: hidden;
}
.upload-item {
  border: 1px solid #fff;
}
</style>
<style lang="scss" scoped>
.test {
  .clear-box {
    h6 {
      padding: 0.2rem;
      font-size: 0.36rem;
    }
    .clear-btn {
      min-width: 1.2rem;
      height: 0.8rem;
      background-color: blue;
      border-radius: 2em;
      padding: 0 0.12rem;
      margin: 0 0.2rem;
    }
  }

  .picker-header {
    width: 100%;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.38rem;
    background-color: #ffffff;
    // border-bottom: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: content;
    div {
      flex: 1;
      text-align: center;
    }
  }
  .touch-box {
    width: 4rem;
    height: 4rem;
    background-color: red;
  }
}
</style>
